import React, { Component, useState, useEffect } from 'react'
import {
  NavBar,
  Icon,
  InputItem,
  WingBlank,
  WhiteSpace,
  Button,
  Modal,
  Toast
} from 'antd-mobile'
import './index.css'
import msg from './msg.png'
import { registeUser } from '../../api/register/verify_phone'

export default function VerifyCode(props) {
  const [password, setpassword] = useState('')
  const [isOpen, setisOpen] = useState(false)

  function handleChange(e) {
    setpassword(e)
  }
  function handleIsOpen() {
    setisOpen(!isOpen)
  }
  async function handleClick() {
    const result = await registeUser(props.phone, password)
    // console.log(result);
    if (result.data.success) {
      Toast.success('注册成功！！！', 1);
      props.history.push('/Login')
    } else {
      Toast.fail('注册失败，请检查网络！', 1)
    }

  }
  // console.log(this.state.password);
  return (
    <div className='wrap'>
      <NavBar
        mode='light'
        icon={<Icon type='left' color='#000' />}
        onLeftClick={()=>props.history.goBack()}
      >
        硅谷注册
      </NavBar>
      <WhiteSpace size='lg'></WhiteSpace>

      <WingBlank size='lg'>
        <div className='img'>
          <img src={msg} alt='' />
        </div>
        <WhiteSpace size='lg'></WhiteSpace>
        <WingBlank size='lg'>
          <div className='tip'>请设置登录密码</div>
        </WingBlank>
        <WhiteSpace size='lg'></WhiteSpace>

        <div className='code'>
          <InputItem
            className='psw'
            type={isOpen ? 'text' : 'password'}
            clear
            placeholder='请设置8~20位登录密码'
            extra={<span className={isOpen ? 'iconfont icon-yanjing' : 'iconfont icon-close-eye'} onClick={handleIsOpen}></span>}
            value={password}
            onChange={handleChange}
          ></InputItem>
        </div>
        <WingBlank size='lg'>
          <div>
            密码由8-20位字母、数字或半角符号组成，不能是10位以下纯数字/字母/半角符号，字母需区分大小写
          </div>
        </WingBlank>
        <WingBlank size='lg'>
          <Button className='code-next' type='warning' disabled={!/^\w{8,20}$/.test(password)} onClick={handleClick}>
            完成
          </Button>
        </WingBlank>
        <WingBlank size='lg'>
          遇到问题了?
          <a href=''>请联系客服</a>
        </WingBlank>
      </WingBlank>
    </div>
  )

}
